import { Button, Dropdown } from 'antd';
import type { MenuProps } from 'antd';
import React from 'react';
import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom';

import styles from './header-top.module.css';

const items: MenuProps['items'] = [
  {
    key: 'cn',
    label: '中文'
  },
  {
    key: 'en',
    label: '英文'
  }
];
export const HeaderTop: React.FC = () => {
  const history = useHistory();
  const location = useLocation();
  const params = useParams();
  const routeMatch = useRouteMatch();
  return (
    <div className={styles['top-header']}>
      <div className={styles['inner']}>
        <div className={styles['inner-left']}>
          <div className={styles['inner-left-label']}>让旅游更幸福</div>
          <Dropdown menu={{ items }} placement="bottom">
            <Button>中文</Button>
          </Dropdown>
        </div>
        <Button.Group className={styles['button-group']}>
          <Button onClick={() => history.push('/signIn')}>登录</Button>
          <Button onClick={() => history.push('/register')}>注册</Button>
        </Button.Group>
      </div>
    </div>
  );
};
